<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="图表分析" libs=["echarts"]/>
<section class="content">
    <@f.tip> 更多图表功能请访问 <a href="https://echarts.apache.org/zh/index.html" target="_blank">https://echarts.apache.org/zh/index.html</a></@f.tip>
    <!-- 数据统计-->
    <div class="row">
        <div class="col-lg-2 col-xs-6">
            <!-- small box -->
            <div class="card-link-block">
                <div class="card-link-block-num">15</div>
                <div class="card-link-block-text">外出申请</div>
                <i class="card-link-block-icon fa icon-book-open"></i>
                <div class="card-link-block-band">待审批</div>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-2 col-xs-6">
            <!-- small box -->
            <div class="card-link-block bg-yellow">
                <div class="card-link-block-num">13</div>
                <div class="card-link-block-text">请假审批</div>
                <i class="card-link-block-icon fa icon-speedometer"></i>
                <div class="card-link-block-band">待审批</div>
            </div>
        </div>

        <div class="col-lg-2 col-xs-6">
            <!-- small box -->
            <div class="card-link-block bg-primary">
                <div class="card-link-block-num">13</div>
                <div class="card-link-block-text">请假审批</div>
                <i class="card-link-block-icon fa icon-envelope"></i>
                <div class="card-link-block-band">待审批</div>
            </div>
        </div>

        <div class="col-lg-2 col-xs-6">
            <!-- small box -->
            <div class="card-link-block bg-aqua">
                <div class="card-link-block-num">13</div>
                <div class="card-link-block-text">请假审批</div>
                <i class="card-link-block-icon fa icon-social-twitter"></i>
                <div class="card-link-block-band">待审批</div>
            </div>
        </div>

        <div class="col-lg-2 col-xs-6">
            <!-- small box -->
            <div class="card-link-block bg-red">
                <div class="card-link-block-num">13</div>
                <div class="card-link-block-text">请假审批</div>
                <i class="card-link-block-icon fa icon-lock"></i>
                <div class="card-link-block-band">待审批</div>
            </div>
        </div>
        <div class="col-lg-2 col-xs-6">
            <!-- small box -->
            <div class="card-link-block bg-green">
                <div class="card-link-block-num">13</div>
                <div class="card-link-block-text">请假审批</div>
                <i class="card-link-block-icon fa icon-paper-plane"></i>
                <div class="card-link-block-band">待审批</div>
            </div>
        </div>
    </div>
    <!-- 快捷方式-->
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5><i class="fa fa-th-list"></i> 快捷菜单</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
        <div class="col-sm-6 ptl0">
            <div class="col-lg-3 col-xs-6">
                <div class="console-group">
                    <i class="console-icon fa fa-cube"
                       style="color: #ffd666;font-size: 34px;"></i>
                    <div class="console-name">资产登记</div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="console-group">
                    <i class="console-icon fa fa-random"
                       style="color: #29c600;font-size: 34px;"></i>
                    <div class="console-name">资产调拨</div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="console-group">
                    <i class="console-icon fa fa-dashboard"
                       style="color: #770a89;font-size: 34px;"></i>
                    <div class="console-name">资产盘点</div>
                    <div id="pdqk" class="console-link-block-band">未盘点</div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="console-group">
                    <i class="console-icon fa  icon-logout"
                       style="color: #0283d9;font-size: 34px;"></i>
                    <div class="console-name">资产退库</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 ptl0">
            <div class="col-lg-3 col-xs-6">
                <div class="console-group">
                    <i class="console-icon fa fa-hand-lizard-o"
                       style="color: #742bb3;font-size: 34px;"></i>
                    <div class="console-name">资产领用</div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="console-group">
                    <i class="console-icon fa fa-navicon"
                       style="color: #129768;font-size: 34px;"></i>
                    <div class="console-name">资产维护</div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="console-group">
                    <i class="console-icon fa fa-address-card"
                       style="color: #097d1a;font-size: 34px;"></i>
                    <div class="console-name">资产履历</div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="console-group">
                    <i class="console-icon fa fa-archive"
                       style="color: #d6e558;font-size: 34px;"></i>
                    <div class="console-name">资产报废</div>
                </div>
            </div>
        </div>
    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox">
                <div class="ibox-title">
                    <h5><i class="fa fa-pie-chart"></i> 资产状态占比情况</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div id="main0" class="mt10" style="height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox">
                <div class="ibox-title">
                    <h5><i class="fa fa-pie-chart"></i> 机构部门占用情况</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div id="main2" class="mt10" style="height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5><i class="fa fa-bar-chart"></i> 资产分类信息统计</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div id="main3" class="mt10" style="height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<@footer>
    <script type="text/javascript">
        var pieChart = echarts.init(document.getElementById("main0"));
        var option = {
            // title: {
            //     text: '某站点用户访问来源',
            //     subtext: '纯属虚构',
            //     left: 'center'
            // },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br />{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 50,
                top: '40%',
                icon: 'circle'
            },
            series: [
                {
                    name: '资产数量',
                    type: 'pie', //饼状
                    selectedMode: 'single', //设置单选:single  多选:multiple
                    radius: '50%',
                    data: [
                        {value: 1048, name: '闲置'},
                        {value: 735, name: '再用',selected:true}, //初始选中
                        {value: 580, name: '借用'},
                        {value: 484, name: '维修中'},
                        {value: 300, name: '调拨中'},
                        {value: 300, name: '报废'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        pieChart.setOption(option);
        $(window).resize(pieChart.resize);

        var pieChart2 = echarts.init(document.getElementById("main2"));
        var data = genData(50);
        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                icon: 'circle',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.legendData,

                selected: data.selected
            },
            series: [
                {
                    name: '姓名',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: data.seriesData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };




        function genData(count) {
            var nameList = [
                '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
            ];
            var legendData = [];
            var seriesData = [];
            for (var i = 0; i < count; i++) {
                var name = Math.random() > 0.65
                    ? makeWord(4, 1) + '·' + makeWord(3, 0)
                    : makeWord(2, 1);
                legendData.push(name);
                seriesData.push({
                    name: name,
                    value: Math.round(Math.random() * 100000)
                });
            }

            return {
                legendData: legendData,
                seriesData: seriesData
            };

            function makeWord(max, min) {
                var nameLen = Math.ceil(Math.random() * max + min);
                var name = [];
                for (var i = 0; i < nameLen; i++) {
                    name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
                }
                return name.join('');
            }
        }
        pieChart2.setOption(option);
        $(window).resize(pieChart2.resize);


        var pieChart3 = echarts.init(document.getElementById("main3"));
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];
        var app = [];
        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: posList.reduce(function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };


        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };


        var labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                }
            }
        };

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['Forest', 'Steppe', 'Desert', 'Wetland']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: ['2012', '2013', '2014', '2015', '2016']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Forest',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390]
                },
                {
                    name: 'Steppe',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290]
                },
                {
                    name: 'Desert',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190]
                },
                {
                    name: 'Wetland',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [98, 77, 101, 99, 40]
                }
            ]
        };

        pieChart3.setOption(option);
        $(window).resize(pieChart3.resize);
    </script>
</@footer>
</@pageTheme>